<template>
    <div class="calendar-list">
       <div class="list-header">
        <span>一</span>
        <span>二</span>
        <span>三</span>
        <span>四</span>
        <span>五</span>
        <span>六</span>
        <span>日</span>
       </div>
       <div class="list-body">
        <span
        v-for="item in lists"
        :class="styleObj(item)"
        @click="handleClick(item)"
      >
        {{ item.date }}
      </span>
       </div>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import{useYearsStore} from '@/stores/years'

const years= useYearsStore()
const {date, lists } = storeToRefs(years)
const {lastMonth, nextMonth}=years
const styleObj = computed(() => {
  return (item) => {
    return {
      off: item.type !== 'this',
      active: item.date === date.value && item.type === 'this',
    }
  }
})
const handleClick = (item) => {
  if (item.type === 'last') {
    lastMonth()
  } else if (item.type === 'next') {
    nextMonth()
  }
  date.value = item.date
}
</script>

<style lang="scss" scoped>
.calendar-list {
    padding: 0 20px;
    background-color: #fff;
    .list-header {
        display: flex;
        gap: 20px;
        span{
            flex: 1;
            padding: 10px;
            text-align: center;
            font-size: 14px;
            color: #333;
            cursor: default;
            &:nth-child(6), 
            &:nth-child(7){
                color: #f11;
            }
        }
    }
    .list-body {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: repeat(6, 1fr);
        gap: 20px;
        span {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px;
            font-size: 22px;
            font-weight: bold;
            border-radius: 12px;
            color: #333;
            cursor: pointer;
            &:hover{
                background-color: rgb(40, 110, 240);
                color: #fff;
            }
            &:nth-child(7n),
            &:nth-child(7n-1){
                color: #f11;
            }
            &.off{
                // color: #ccc;
                opacity: 0.3;
            }
            &.active{
                color: rgb(40, 110, 240);
                border: 2px solid rgb(40, 110, 240);
                background-color: #fff;
            }
        }
    }
}
</style>